<!--
 * @Author: WangLong
 * @Date: 2023-12-29 09:25:49
 * @LastEditTime: 2023-12-29 11:31:35
 * @LastEditors: WangLong
 * @Description:
 * @FilePath: \jnks_low_air_front_company\src\components\smscode\index.vue
-->
<template>
  <div class="smscontainer">
    <span v-if="countdown > 0">等待 {{ countdown }} 秒</span>
    <div v-else :disabled="isWaiting" class="tooltip">
      {{ buttonText }}
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";

// 等待状态
const isWaiting = ref(false);

// 倒计时
const countdown = ref(0);

// 按钮文本
const buttonText = ref("获取验证码");

// 开始倒计时
const startCountdown = (degtime = 180, registerMobile = null) => {
  isWaiting.value = true;
  countdown.value = degtime;
  buttonText.value = `${countdown.value} 秒后重试`;
  const timer = setInterval(() => {
    countdown.value--;

    if (countdown.value === 0) {
      clearInterval(timer);
      isWaiting.value = false;
      buttonText.value = "获取验证码";
    } else {
      buttonText.value = `${countdown.value} 秒后重试`;
    }
  }, 1000);
};

// 监听倒计时变化
watch(countdown, (newValue) => {
  if (newValue === 0) {
    buttonText.value = "获取验证码";
  }
});
defineExpose({ startCountdown, isWaiting });
</script>

<style lang="scss" scoped>
.smscontainer {
  .tooltip {
    cursor: pointer;
  }
}
</style>
